<template>
	<view class="details">
		<uni-nav-bar title="更改信息" shadow left-icon="left"  @clickLeft="gomy()"/>
		<view class="box">
		<view class="title1"></view>
		<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
			<uni-forms-item label="标题" labelAlign="center" labelWidth="50px" name="title">
				<uni-easyinput v-model="valiFormData.title" placeholder="请输入标题" />
			</uni-forms-item>
			<view class="xinzi">
				<uni-forms-item label="薪资" labelAlign="center" labelWidth="50px" name="xinzi">
					<uni-easyinput v-model="valiFormData.xinzi" placeholder="请输入薪资" />
				</uni-forms-item>
				<text class="xinzi-text">/天</text>
			</view>
			<view class="number">
				<uni-forms-item label="招聘数量" labelAlign="center" labelWidth="70px" name="number">
					<uni-easyinput v-model="valiFormData.number" placeholder="请输入招聘数量" />
				</uni-forms-item>
				<text class="number-text">人</text>
			</view>
			<view class="title">岗位职责</view>
			<uni-forms-item labelWidth="0px" name="responsibility">
				<uni-easyinput type="textarea" v-model="valiFormData.responsibility" />
			</uni-forms-item>
			<view class="title">岗位要求</view>
			<uni-forms-item labelWidth="0px" name="requirement">
				<uni-easyinput type="textarea" v-model="valiFormData.requirement" />
			</uni-forms-item>
		</uni-forms>
		<!-- 动态表单校验 -->
		<button type="primary" @click="submit('valiForm')">更改</button>
		</view>
	</view>
</template>

<script>
	import axios from "axios"
	export default {
		data() {
			return {
				id:'',
				// 校验表单数据
				valiFormData: {
					title: '',
					xinzi: '',
					number: '',
					responsibility: '',
					requirement: '',
				},
				// 校验规则
				rules: {
					title: {
						rules: [{
							required: true,
							errorMessage: '不能为空'
						}]
					},
					xinzi: {
						rules: [{
							required: true,
							errorMessage: '不能为空'
						}, {
							format: 'number',
							errorMessage: '只能输入数字'
						}]
					},
					number: {
						rules: [{
							required: true,
							errorMessage: '不能为空'
						}, {
							format: 'number',
							errorMessage: '只能输入数字'
						}]
					},
					responsibility: {
						rules: [{
							required: true,
							errorMessage: '不能为空'
						}]
					},
					requirement: {
						rules: [{
							required: true,
							errorMessage: '不能为空'
						}]
					},
				},
			}
		},
		computed: {

		},
		onLoad(data) {
			this.id = data.id
			this.valiFormData.title = data.title
			this.valiFormData.xinzi = data.xinzi
			this.valiFormData.number = data.number
		},
		mounted() {
			axios.get('/api/details?id='+this.id)
			.then(res =>{
				// console.log(res.data[0].requirement);
				this.valiFormData.responsibility = res.data[0].responsibility
				this.valiFormData.requirement = res.data[0].requirement
			})
		},
		methods: {
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					console.log('success', res);
					uni.showLoading({
						title: `校验通过`
					})
				}).then(res =>{
					const id = this.listid
					const title = this.valiFormData.title
					const xinzi = this.valiFormData.xinzi
					const number = this.valiFormData.number
					const responsibility = this.valiFormData.responsibility
					const requirement = this.valiFormData.requirement
					axios.post('/api/updatadetails?id='+id+'&title='+title
					+'&xinzi='+xinzi+'&number='+number+'&responsibility='+responsibility
					+'&requirement='+requirement).then(res =>{
						console.log(res.data);
						uni.showToast({
							title: `更改成功`
						})
					}).catch(res =>{
						uni.showToast({
							title: `更改失败`
						})
					})
				})
				.catch(err => {
					console.log('err', err);
				});
			},
			gomy(){
				uni.navigateTo({
					url:'/pages/my/qiye/zhaopin-list/zhaopin-list'
				})
			}
		}
	}
</script>

// onLoad: function(data) {
// this.teid = data.id
// }
<style scoped lang="scss">
	
	.box{
		padding:20rpx 30rpx;
	}
	.xinzi,.number {
		display: flex;
		align-items: center;
		.xinzi-text,.number-text {
			font-size: 40rpx;
			font-weight: bold;
			color: #FFCC99;
		}
	}

	.title1 {
		width: 100%;
		height: 20rpx;
		background-color: #cccccc;
	}

	.title {
		margin: 10rpx 0 10rpx 0;
		font-size: 40rpx;
		font-weight: bold;
		color: #99CCCC;
	}

	// .uni-easyinput {
	// 	width: 80%;
	// }


	.button-group {
		margin: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}
	uni-button{
		width: 40%;
	}
</style>
